<!-- 用户配置 -->
<template>
	<div class="roleManageConfig">
		<el-dialog title="用户配置" :visible.sync="dialogVisible" :close-on-click-modal="false" width="60%" height="50%"
			top="10vh">
			<el-tabs v-model="activeName" class="" @tab-click="handleClick">
				<el-tab-pane label="机构用户" name="first" class="">
					<el-row class="searchLabel">
						<el-col :span="10" class="grid">
							<el-input v-model.trim="form.orgName" placeholder="请输入机构用户名称" size="mini"
								@keyup.enter.native="search" @change="resetPage1"></el-input>
						</el-col>
						<el-col :span="14" class="grid" style="padding-left: 30px;">
							<el-button v-blur class="query" @click="search">查 询</el-button>
							<el-button v-blur class="reset" @click="reset">重 置</el-button>
							<el-button v-blur class="added" @click="add">添 加</el-button>
							<el-button v-blur class="del" @click="del">删 除</el-button>
						</el-col>
					</el-row>
					<div class="tableDiv">
						<el-table stripe :data="tableData1" row-key="arsId" @selection-change="roleuserSelectChange1"
							style="border-radius: 6px;border-bottom: 0;" :header-cell-style="{color:'#333333',fontFamily:'PingFang SC',fontSize:'14px',fontWeight:500,background: '#F4F8FF',
					}">
							<el-table-column type="selection" width="40"></el-table-column>
							<el-table-column type="index" label="序号"></el-table-column>
							<el-table-column prop="orgName" label="用户名称"></el-table-column>
							<el-table-column prop="loginName" label="登录账号"></el-table-column>
							<el-table-column prop="dictNameResult.orgTypeCode" label="机构类别"></el-table-column>
						</el-table>
					</div>
					<el-pagination style='text-align:right;margin-top: 10px;' @size-change="handleSizeChange1"
						@current-change="handleCurrentChange1" :current-page="pageNum1" :page-sizes="[10, 20, 30, 40]"
						:page-size="pageSize1" layout="total, sizes, prev, pager, next, jumper"
						:total="recordsFiltered1">
					</el-pagination>
				</el-tab-pane>
				<el-tab-pane label="个人用户" name="second">
					<el-row class="searchLabel">
						<el-col :span="10" class="grid">
							<el-input v-model.trim="form.userName" placeholder="请输入个人用户名称" size="mini"
								@keyup.enter.native="search" @change="resetPage2"></el-input>
						</el-col>
						<el-col :span="14" class="grid" style="padding-left: 30px; text-align:left">
							<el-button v-blur class="query" @click="search">查 询</el-button>
							<el-button v-blur class="reset" @click="reset">重 置</el-button>
							<el-button v-blur class="added" @click="add">添 加</el-button>
							<el-button v-blur class="del" @click="del">删 除</el-button>
						</el-col>
					</el-row>
					<div class="tableDiv">
						<el-table :data="tableData2" @selection-change="roleuserSelectChange2"
							style="border:1px solid #EBEEF5 ;border-radius: 6px; border:1px solid #EBEEF5;border-bottom: 0;"
							:header-cell-style="{color:'#333333',fontFamily:'PingFang SC',fontSize:'14px',fontWeight:500,background: '#F4F8FF',
					}">
							<el-table-column type="selection" width="40"></el-table-column>
							<el-table-column type="index" label="序号"></el-table-column>
							<el-table-column prop="userName" label="用户名称"></el-table-column>
							<el-table-column prop="loginName" label="登录账号"></el-table-column>
							<el-table-column prop="deptName" label="所属部门"></el-table-column>
							<!-- <el-table-column prop="orgName" label="所属机构"></el-table-column> -->
						</el-table>
					</div>
					<el-pagination style='text-align:right;margin-top: 10px;' @size-change="handleSizeChange2"
						@current-change="handleCurrentChange2" :current-page="pageNum2" :page-sizes="[10, 20, 30, 40]"
						:page-size="pageSize2" layout="total, sizes, prev, pager, next, jumper"
						:total="recordsFiltered2">
					</el-pagination>
				</el-tab-pane>
			</el-tabs>
			<span slot="footer" class="dialog-footer">
				<el-button v-blur class="query" @click="dialogVisible = false">返 回</el-button>
			</span>
		</el-dialog>
		<newUser ref="newUser"></newUser>
	</div>
</template>

<script>
	import newUser from './NewUser.vue'
	import api from '@/api/systemManagement/RolesPermissions/roleManage.js'
	import '@/assets/queryPublic.css'
	export default {
		name: 'roleManageConfig',
		components: {
			newUser,
		},
		data() {
			return {
				activeName: 'first',
				dialogVisible: false,
				pageNum1: 1, //机构用户
				pageSize1: 10,
				recordsFiltered1: 0,
				pageNum2: 1, //个人用户
				pageSize2: 10,
				recordsFiltered2: 0,
				multipleSelection: [],
				tableData1: [], //机构用户
				tableData2: [], //个人用户
				form: {
					orgName: '',
					userName: '',
					arId: '',
				},
			}
		},
		mounted() {},
		watch: {
			'activeName': {
				// immediate:true,
				handler(val) {
					this.GetList()
				}
			}
		},
		methods: {
			show(r) {
				this.form.arId = r.arId;
				this.dialogVisible = true;
				this.GetList()
			},
			resetPage1() {
				this.pageNum1 = 1;
			},
			resetPage2() {
				this.pageNum1 = 1;
			},
			search() {
				this.GetList()
			},
			reset() {
				if (this.activeName == 'first') {
					this.form.orgName = '';
					this.pageNum1 = 1;
				} else {
					this.form.userName = '';
					this.pageNum2 = 1;
				}
				this.GetList()
			},
			add() {
				if (this.activeName == 'first') {
					this.$refs.newUser.show('机构', this.form.arId);
				} else {
					this.$refs.newUser.show('个人', this.form.arId);
				}
			},
			del() {
				if (this.multipleSelection.length <= 0) {
					return this.$message.error("请选择要删除的数据")
				}
				this.$confirm(
					"您确定要删除吗? 是否继续?",
					"提示", {
						cancelButtonClass: "bth-custom-cancel",
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					}
				).then(() => {
					let auIds = this.multipleSelection.map(it => it.userInfoNo).join();
					api.deleteRoleUser(this.form.arId, auIds).then((res) => {
						if (res.data.code == 200) {
							this.$message({
								type: "success",
								message: "删除成功!",
							});
							this.GetList()
						} else {
							this.$message.error(res.data.msg)
						}
					})
				});
			},
			GetList() {
				if (this.activeName == 'first') {
					//请求机构用户
					let data = {
						"pageNum": this.pageNum1,
						"pageSize": this.pageSize1,
						"param": {
							"userType": "02", //默认值02
							"arId": this.form.arId,
							"orgName": this.form.orgName,
						},
					}
					api.queryOrgUserRoleList(data).then(res => {
						if (res.data && res.data.code == 200) {
							if (res.data.data) {
								this.tableData1 = res.data.data;
								this.recordsFiltered1 = res.data.recordsFiltered;
							}
						} else {
							this.$message.error(res.data.msg || res.message);
						}
					})

				} else {
					//请求个人用户
					let data = {
						"pageNum": this.pageNum2,
						"pageSize": this.pageSize2,
						"param": {
							"userType": "01", //默认值01
							"arId": this.form.arId,
							"userName": this.form.userName,
						},
					}
					api.querySysRoleUserList(data).then(res => {
						if (res.data && res.data.code == 200) {
							if (res.data.data) {
								this.tableData2 = res.data.data;
								this.recordsFiltered2 = res.data.recordsFiltered;
							}
						} else {
							this.$message, error(res.data.msg || res.message);
						}
					})
				}
			},
			handleClick(tab, event) {
				this.pageNum = 1;
				this.pageSize = 10;
				this.recordsFiltered = 0;
			},
			//机构用户
			handleSizeChange1(val) {
				this.pageSize1 = val;
				this.pageNum1 = 1;
				this.GetList()
			},
			handleCurrentChange1(val) {
				this.pageNum1 = val;
				this.GetList()
			},
			//个人用户
			handleSizeChange2(val) {
				this.pageSize2 = val;
				this.pageNum2 = 1;
				this.GetList()
			},
			handleCurrentChange2(val) {
				this.pageNum2 = val;
				this.GetList()
			},
			roleuserSelectChange1(val) {
				this.multipleSelection = val;
			},
			roleuserSelectChange2(val) {
				this.multipleSelection = val;
			},
		}
	}
</script>

<style scoped lang='scss'>
	/* 滚动条 */
	::-webkit-scrollbar {
		width: 8px;
		height: 100%;
	}

	::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 5px;
		-webkit-box-shadow: inset 0 0 5px #F4F8FF;
		box-shadow: inset 0 0 5px #F4F8FF;
		background: #F4F8FF;
	}

	::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		// -webkit-box-shadow: inset 0 0 5px rgba(14,54,94, 0.2);
		// box-shadow: inset 0 0 5px rgba(14,54,94, 0.2);
		// border-radius: 5px;
		// background: rgba(14,54,94, 0.1);
	}

	/deep/.el-dialog__body {
		height: 63vh;
	}

	/deep/ .el-dialog__footer {
		text-align: center;
	}

	/deep/.el-table td.el-table__cell,
	.el-table th.el-table__cell {
		border-bottom: 1px solid #EBEEF5;
		border-right: 0px;
		width: 500px;
	}

	/deep/.el-table--border th.el-table__cell,
	.el-table__fixed-right-patch {
		border-bottom: 1px solid #EBEEF5;
		border-right: 0px;
	}

	.searchLabel {
		margin-bottom: 10px;
		text-align: left;
	}

	.tableDiv {
		width: 100%;
		max-height: 466px;
		overflow-y: scroll;
		box-sizing: border-box;
		padding: 0 ;
	}
</style>
